<template>
    <div class="changePsd_r">
      <w-breadcrumb style="font-size: 14px;margin-left:5px" separator="/">
        <w-breadcrumb-item>个人信息管理</w-breadcrumb-item>
        <w-breadcrumb-item>修改密码</w-breadcrumb-item>
      </w-breadcrumb>
      <div class="changePsd_wrap">
        <input
          spellcheck="false"
          class="psdInput"
          :type="psdType"
          placeholder="新密码"
          maxlength="16"
          minlength="6"
          v-model="newPsd"
        />
        <i
          v-show="showGuan"
          @click="open"
          class="iconfont icon-yanjing-guan"
        ></i>
        <i
          v-show="!showGuan"
          @click="close"
          class="iconfont icon-yanjing-kai"
        ></i
        ><br />
        <input spellcheck="false" class="psdInput" :type="newPsdType" placeholder="确认新密码" v-model="comNewPsd" />
        <i
          v-show="showGuanNew"
          @click="open_new"
          class="iconfont icon-yanjing-guan"
        ></i>
        <i
          v-show="!showGuanNew"
          @click="close_new"
          class="iconfont icon-yanjing-kai"
        ></i
        ><br />
        <w-button @click="changePsd" type="primary" plain class="change_btn">确认修改</w-button>
      </div>
    </div>
</template>

<script>
export default {
  name: "ChangePsd",
  data() {
    return {
      psdType: "password",
      newPsdType:"password",
      showGuan: true,
      showGuanNew: true,
      newPsd: "",
      comNewPsd: "",
    };
  },
  methods: {
    open() {
      this.showGuan = false;
      this.psdType = "text";
    },
    open_new(){
      this.showGuanNew = false;
      this.newPsdType = "text"
    },
    close() {
      this.showGuan = true;
      this.psdType = "password";
    },
    close_new() {
      this.showGuanNew = true;
      this.newPsdType = "password";
    },
    changePsd() {
      if(this.newPsd === this.comNewPsd && this.comNewPsd !== '' && this.newPsd != ''){
        const uid = localStorage.getItem('uid');
        this.$axios({
          method:"POST",
          url:"http://1.15.170.222:88/api/user/update/password",
          data:{
            field:uid,
            password:this.newPsd
          }
        }).then((response) => {
          console.log(response);
          this.$alert("修改成功", "提示", {
            confirmButtonText: "确定",
          })
          this.newPsd = '';
          this.comNewPsd = ''
        })
      }else if (this.newPsd != this.comNewPsd){
         this.$alert("两次输入不一致", "提示", {
            confirmButtonText: "确定",
          })
      }else if(this.comNewPsd === '' || this.newPsd === ''){
        this.$alert("请输入内容", "提示", {
            confirmButtonText: "确定",
          })
      }
    },
  },
};
</script>

<style>
.changePsd_r {
  padding-top: 40px;
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.changePsd_wrap {
  margin: 150px auto;
}
.psdInput {
  outline: none;
  margin-bottom: 30px;
  width: 350px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #d3d7d4;
  text-indent: 2px;
}
.change_btn {
    margin: 20px 120px;
}
</style>
